<template>
  <div class="css-slider-viewport">
    <div class="css-slider-holder">
      <div class="grid grid--slider grid4 slider" ref="slider">
        <aplusmax-categorys v-for="(category, index) in categorys" :key="index" :cate="category"></aplusmax-categorys>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, reactive, computed, ref, onMounted} from 'vue'
import {getHotCategorys} from "@/api/category.ts";

defineProps({})

const categorys = ref([])
const HotCategorys = () => {
  getHotCategorys().then(({data}) => {
    categorys.value = data
  })
}
HotCategorys()


const emit = defineEmits([])

defineExpose({})
</script>

<style scoped lang='less'>

.slider {
  display: flex;
  transition: transform 0.5s ease;
}
.css-slider-viewport{
  width: 100%;
  .css-slider-holder{
    overflow: hidden;
    //overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    cursor: grab;
    .grid--slider{
      grid-auto-flow: column;
      grid-template-columns: calc( (100% - 26px * (4 - 1)) / 4 );
      grid-auto-columns: calc( (100% - 26px * (4 - 1)) / 4 );
      position: relative;
    }
    .grid-4{
      --visible-cols: 4;
    }
    .grid{
      --col-gap: 26px;
      --col-size: calc( (100% - var(--col-gap) * (var(--visible-cols) - 1)) / var(--visible-cols) );
      display: grid;
      grid-gap: var(--col-gap);
    }
  }
}

.product{
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.css-slide--snap{
  scroll-snap-align: start;
}
.card{
  --border-width-cards: 1px;
  --border-radius-cards: 10px;
  --border-width-buttons: 1px;
  --border-radius-buttons: 30px;
  --border-width-forms: 1px;
  --border-radius-forms: 5px;
  --shadow-x-cards: 0px;
  --shadow-y-cards: 0px;
  --shadow-blur-cards: 0px;
  border: solid var(--border-width-cards) #e1e1e1;
  border-radius: var(--border-radius-cards);
  overflow: hidden;
  background-color: #ffffff;
  position: relative;
  color: #1d1d1d;
  box-shadow: var(--shadow-x-cards) var(--shadow-y-cards) var(--shadow-blur-cards) rgba(0,0,0,0);
  margin-bottom: calc(var(--shadow-y-cards) + var(--shadow-blur-cards));
  margin-inline-end: calc(var(--shadow-x-cards) + var(--shadow-blur-cards));
}
</style>